<template>
  <div class="contract">
    <p class="location">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><i class="el-icon-location-outline" /> &nbsp;&nbsp;&nbsp;当前位置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/aggregation/contract-guard' }">劳动合同卫士</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/aggregation/laborcontract' }">我的合同</el-breadcrumb-item>
        <el-breadcrumb-item v-if="genre === '1'">从ComDoc数据库中预定义一个专业合同</el-breadcrumb-item>
        <el-breadcrumb-item v-if="genre === '2'">本地上传已有合同</el-breadcrumb-item>
        <el-breadcrumb-item v-if="genre === '3'">开始于空白文件</el-breadcrumb-item>
      </el-breadcrumb>
    </p>
    <div class="side-bar">
      <ul>
        <li v-for="(item,index) in itmeList" :key="index" :class="activeClass == index ? 'active':''" @click="getItme(index)">{{ item.name }}</li>
      </ul>
    </div>
    <div class="all">
      <ul>
        <li>
          <span><img src="../../assets/contract/icon_hetong.png" alt=""></span>
          <span>劳动合同范本</span>
        </li>
        <li>
          <span><img src="../../assets/contract/icon_hetong.png" alt=""></span>
          <span>劳动合同范本</span>
        </li>
        <li>
          <span><img src="../../assets/contract/icon_hetong.png" alt=""></span>
          <span>劳动合同范本</span>
        </li>
        <li>
          <span><img src="../../assets/contract/icon_hetong.png" alt=""></span>
          <span>劳动合同范本</span>
        </li>
        <li>
          <span><img src="../../assets/contract/icon_hetong.png" alt=""></span>
          <span>劳动合同范本</span>
        </li>
      </ul>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['changeContract'],
  data() {
    return {
      activeClass: 0,
      itmeList: [{ name: '人社部' }, { name: '各类型' }, { name: '各省市' }, { name: '各行业/岗位' }, { name: '变更解读续' }, { name: '合规检查工具' },
        { name: '入在离360' }, { name: '民主流程' }, { name: '本地模板' }],
      genre: ''
    }
  },
  created() {
    this.genre = this.$route.query.type
    console.log(this.genre)
  },
  methods: {
    getItme(val) {
      console.log(val)
      this.activeClass = val
    },
    cancel(val) {
      this.changeContract(false)
    }
  }
}
</script>

<style scoped>
.contract{
  height: calc(100vh - 60px);
  overflow: hidden;
  padding:20px;
}
.contract>div{
  display:inline-block;
  float:left;
}
.contract /deep/.el-breadcrumb{
  color:#999;
  font-size:12px;
}
.side-bar{
  width:150px;
  height: 95%;
  background:#fff;
}
.side-bar>ul>li{
  border-bottom:1px solid #E2E2E2;
  padding:15px 0 15px 30px;
  font-size:14px;
  cursor: pointer;
}
.all{
  width:90%;
  height:95%;
  float:right !important;
  background:#fff;
  overflow: hidden;
  position:relative;
}
.all>ul>li{
  display:inline-block;
  float:left;
  margin:30px 40px;
}
.all>ul>li>span{
  display:block;
  font-size:12px;
  text-align: left;
}
.all>ul:nth-child(1){
  margin-left:70px;
}
.active{
  border-left:2px solid #E21111;
  color:#E21111;
}
.page{
  text-align: center;
  margin-top:60px;
  height:30px;
  position: absolute;
  bottom:30px;
  left:35%;
}
.contract /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
  background:#E21111;
}
.contract /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover{
  color:#E21111;
}
@media screen and (max-width: 1800px){
  .all{
    width:88%
  }
}
@media screen and (max-width: 1700px){
  .all{
    width:87.5%
  }
}
@media screen and (max-width: 1600px){
  .all{
    width:87%
  }
}
</style>
